<!-- 地区销售排行 -->
<template>
  <div class="com-container">
    <div class="com-chart">
      <dv-decoration-7 style="width:25%;height:10px; float:left"><h1>口蹄1</h1></dv-decoration-7>
      <dv-decoration-7 style="width:25%;height:10px;float:left"><h1>口蹄2</h1></dv-decoration-7>
      <dv-decoration-7 style="width:25%;height:10px;float:left"><h1>布病</h1></dv-decoration-7>
      <dv-decoration-7 style="width:25%;height:10px;float:left"><h1>炭疽</h1></dv-decoration-7>
      
      <dv-decoration-7 style="width:100%;height:10px;">疫苗已注射牛数量</dv-decoration-7>
      <dv-active-ring-chart :config="configKouTi1" style="width:25%;height:48%; float:left"/>
      <dv-active-ring-chart :config="configWKouTi2" style="width:25%;height:48%; float:left"/>
      <dv-active-ring-chart :config="configBuBing" style="width:25%;height:48%; float:left"/>
      <dv-active-ring-chart :config="configTanJu" style="width:25%;height:48%; float:left"/>
      
      <!-- <dv-decoration-10 style="width:100%;height:10px;"/> -->
      <dv-decoration-7 style="width:100%;height:20px;">疫苗未注射牛数量</dv-decoration-7>
      <dv-active-ring-chart :config="configWKouTi1" style="width:25%;height:50%; float:left"/>
      <dv-active-ring-chart :config="configWKouTi2" style="width:25%;height:50%; float:left"/>
      <dv-active-ring-chart :config="configWBuBing" style="width:25%;height:50%; float:left"/>
      <dv-active-ring-chart :config="configWTanJu" style="width:25%;height:50%; float:left"/>
    </div>
  </div>
</template>

<script>

import ranks from '@/assets/static/data/ranks.json'
import configKouTi2 from '@/assets/static/data/configKouTi2.json'

export default {
  data() {
    return {
      radius: '50%',
      activeRadius: '1%',
      //已注射口蹄1数量
      configKouTi1: {
        data: ranks,
        digitalFlopStyle: {
          fontSize: 14
        },
        showOriginValue: true,
        lineWidth: 10,
        activeTimeGap: 8000
      },
      //已注射口蹄2数量
      configKouTi2: {
        data: ranks,
        digitalFlopStyle: {
          fontSize: 14
        },
        showOriginValue: true,
        lineWidth: 10,
        activeTimeGap: 8000
      },
      //已注射布病数量
      configBuBing: {
        data: ranks,
        digitalFlopStyle: {
          fontSize: 14
        },
        showOriginValue: true,
        lineWidth: 10,
        activeTimeGap: 8000
      },
      //已注射炭疽数量
      configTanJu: {
        data: ranks,
        digitalFlopStyle: {
          fontSize: 14
        },
        showOriginValue: true,
        lineWidth: 10,
        activeTimeGap: 8000
      },
      //未注射口蹄1数量
      configWKouTi1:{
      data: configKouTi2,
        digitalFlopStyle: {
        fontSize: 14
      },
      showOriginValue: true,
        lineWidth: 10,
        activeTimeGap: 8000
    },
      //未注射口蹄2数量
      configWKouTi2: {
        data: configKouTi2,
        digitalFlopStyle: {
          fontSize: 14
        },
        showOriginValue: true,
        lineWidth: 10,
        activeTimeGap: 8000
      },
      //未已注射布病数量
     configWBuBing: {
        data: configKouTi2,
        digitalFlopStyle: {
          fontSize: 14
        },
        showOriginValue: true,
        lineWidth: 10,
       activeTimeGap: 8000
      },
      //未注射炭疽数量
      configWTanJu: {
        data: configKouTi2,
        digitalFlopStyle: {
          fontSize: 14
        },
        showOriginValue: true,
        lineWidth: 10,
        activeTimeGap: 8000

      },
    }
  }

}
</script>

<style lang="less" scoped>
</style>
